<template>
  <div>
    <mt-header class="plain" title="完善资料" fixed>
      <mt-button icon="back" slot="left" @click="goBack">取消</mt-button>
      <mt-button slot="right" @click="complete">{{true ? '完成' : '编辑'}}</mt-button>
    </mt-header>
    <div class="info-container">
      <form action="javascript:;" ref="infoForm">
        <div class="option-list">
          <!-- <div class="info-avatar">
                        <img :src="userAvatar || userInfo.avatarUrl || img.myAvatar" @click="changeAvatar">
                        <form action="javascript:;" ref="avatarFileForm">
                            <input type="file" ref="avatarFile" v-show="false" @change="handleAvatarFileChange" accept="image/png,image/jpg,image/jpeg,image/bmt">
                        </form>
                    </div> -->
          <div class="option-item">
            <!-- <mt-cell title="照片" :value="userInfo.username" class="spec color-secondary"></mt-cell> -->
            <div class="x-row option-img-row">
              <div class="x-col-4 option-label">照片</div>
              <div class="x-col-8 option-avatar">
                <!-- <img :src="userAvatar || userInfo.avatarUrl || img.myAvatar" @click="changeAvatar">
                                <form action="javascript:;" ref="avatarFileForm">
                                    <input type="file" ref="avatarFile" v-show="false" @change="handleAvatarFileChange" accept="image/png,image/jpg,image/jpeg,image/bmt">
                                </form> -->
                <div class="option-avatar-holder">
                  <image-picker name="file_avatarurl" :init-data="info.avatarurl || img.myAvatar" :removable="false" :readonly="!editable" height="60px" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
                </div>
              </div>
            </div>
          </div>
          <div class="option-item">
            <mt-cell label="姓名" :value="info.realname" class="spec color-secondary"></mt-cell>
          </div>
          <div class="option-item" @click="sexPicker=true">
            <mt-cell title="性别" :value="info.sex | dicName(sexList)" class="spec color-secondary" is-link></mt-cell>
          </div>
          <div class="option-item" @click="selectPage('regionorder')">
            <mt-cell title="户籍所在地" :value="info.region" class="spec color-secondary" is-link></mt-cell>
          </div>
          <div class="option-item" @click="categoryPicker=true">
            <mt-cell title="人员类别" :value="info.category | dicName(categoryList)" class="spec color-secondary" is-link></mt-cell>
          </div>
          <div class="option-item" @click="degreePicker=true">
            <mt-cell title="文化程度" :value="info.degree | dicName(degreeList)" class="spec color-secondary" is-link></mt-cell>
          </div>
          <div class="option-item" @click="conditionPicker=true">
            <mt-cell title="健康状况" :value="info.condition | dicName(conditionList)" class="spec color-secondary" is-link></mt-cell>
          </div>
          <div class="option-item">
            <mt-cell title="联系方式" :value="info.phoneno" class="spec color-secondary"></mt-cell>
          </div>
          <div class="option-item">
            <mt-cell title="身份证号" :value="info.idcardno" class="spec color-secondary"></mt-cell>
          </div>
          <div class="option-item" v-show="addrEditing">
            <mt-field ref="addrRef" label="家庭住址" v-model="info.address" class="spec color-secondary right-input" :readonly="!editable" @blur.native.capture="toggleAddrEdit"></mt-field>
          </div>
          <div class="option-item" v-show="!addrEditing" @click="toggleAddrEdit('addrRef')">
            <mt-cell title="家庭住址" :value="info.address" class="spec color-secondary fixed-label-width"></mt-cell>
          </div>
          <div class="option-item" @click="showDialog(info.course, '申请职业技能培训专业', 7)">
            <mt-cell title="申请职业技能培训专业" :value="info.course | max(7) " class="spec color-secondary"></mt-cell>
          </div>
          <div class="option-item">
            <mt-cell title="申请职业技能培训专等级" :value="info.courselevel | dicName(courselevelList)" class="spec color-secondary"></mt-cell>
          </div>
          <div class="option-item">
            <div class="x-row option-label">
              培训后就业意向
            </div>
            <div class="x-row option-radio-row">
              <div class="x-col-6">
                <label class="mint-radiolist-label">
                  <span class="mint-radio">
                    <input type="radio" class="mint-radio-input" value="FOUND" v-model="info.intention" :disabled="!editable">
                    <span class="mint-radio-core"></span>
                  </span>
                  <span class="mint-radio-label">创办企业</span>
                </label>
              </div>
              <div class="x-col-6">
                <label class="mint-radiolist-label">
                  <span class="mint-radio">
                    <input type="radio" class="mint-radio-input" value="FLEXIBLE" v-model="info.intention" :disabled="!editable">
                    <span class="mint-radio-core"></span>
                  </span>
                  <span class="mint-radio-label">灵活就业</span>
                </label>
              </div>
            </div>
            <div class="x-row option-radio-row">
              <div class="x-col-6">
                <label class="mint-radiolist-label">
                  <span class="mint-radio">
                    <input type="radio" class="mint-radio-input" value="SELFEMPLOYED" v-model="info.intention" :disabled="!editable">
                    <span class="mint-radio-core"></span>
                  </span>
                  <span class="mint-radio-label">个体经营</span>
                </label>
              </div>
              <div class="x-col-6">
                <label class="mint-radiolist-label">
                  <span class="mint-radio">
                    <input type="radio" class="mint-radio-input" value="EMPLOYMENT" v-model="info.intention" :disabled="!editable">
                    <span class="mint-radio-core"></span>
                  </span>
                  <span class="mint-radio-label">单位就业</span>
                </label>
              </div>
            </div>
          </div>
          <div class="option-item no-border">
            <div class="option-label">上传身份证照片（正面）</div>
            <div class="option-img-holder">
              <image-picker name="file_idcardfronturl" :readonly="!editable" :init-data="info.idcardfronturl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border">
            <div class="option-label">上传身份证照片（反面）</div>
            <div class="option-img-holder">
              <image-picker name="file_idcardbackurl" :readonly="!editable" :init-data="info.idcardbackurl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border option-line-holder" v-if="info.category && info.category != 'OTHER'">
            <div class="option-line"></div>
          </div>
          <div class="option-item no-border" v-if="showEmployment">
            <div class="option-label">就业创业证</div>
            <div class="option-img-holder">
              <image-picker name="file_employmenturl" :readonly="!editable" :init-data="info.employmenturl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showInsurance">
            <div class="option-label">低保家庭证明</div>
            <div class="option-img-holder">
              <image-picker name="file_insuranceurl" :readonly="!editable" :init-data="info.insuranceurl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showIndex">
            <div class="option-label">户口本（索引页）</div>
            <div class="option-img-holder">
              <image-picker name="file_indexurl" :readonly="!editable" :init-data="info.indexurl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showApplicant">
            <div class="option-label">户口本（申请者页）</div>
            <div class="option-img-holder">
              <image-picker name="file_applicanturl" :readonly="!editable" :init-data="info.applicanturl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showDiploma">
            <div class="option-label">毕业证</div>
            <div class="option-img-holder">
              <image-picker name="file_diplomaurl" :readonly="!editable" :init-data="info.diplomaurl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showStudent">
            <div class="option-label">学生证</div>
            <div class="option-img-holder">
              <image-picker name="file_studenturl" :readonly="!editable" :init-data="info.studenturl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showRelease">
            <div class="option-label">监狱证明</div>
            <div class="option-img-holder">
              <image-picker name="file_releaseurl" :readonly="!editable" :init-data="info.releaseurl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showAbandon">
            <div class="option-label">戒毒所证明</div>
            <div class="option-img-holder">
              <image-picker name="file_abandonurl" :readonly="!editable" :init-data="info.abandonurl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
          <div class="option-item no-border" v-if="showContract">
            <div class="option-label">劳动合同</div>
            <div class="option-img-holder">
              <image-picker name="file_contracturl" :readonly="!editable" :init-data="info.contracturl" :picker-img="img.myAddPic" @fileChanged="handleFileChange" @fileRemoved="handleFileRemoved"></image-picker>
            </div>
          </div>
        </div>
      </form>
      <div class="info-button" v-if="editable">
        <mt-button type="primary" style="width: 160px; height: 45px;" @click="complete">提交</mt-button>
      </div>
      <div @touchmove.prevent>
        <mt-popup v-model="sexPicker" position="bottom" class="mint-popup">
          <mt-picker :show-toolbar="true" :slots="[Object.create({values:sexList,className: 'slot1'})]" value-key="label" @change="onSexDateChange">
            <div class="toolbar-button">
              <div @click="sexPicker=false">取消</div>
              <div @click="confirmChange('sex');sexPicker=false">确定</div>
            </div>
          </mt-picker>
        </mt-popup>
        <mt-popup v-model="categoryPicker" position="bottom" class="mint-popup">
          <mt-picker :show-toolbar="true" :slots="[Object.create({values:categoryList,className: 'slot1'})]" value-key="label" @change="onCategoryDateChange">
            <div class="toolbar-button">
              <div @click="categoryPicker=false">取消</div>
              <div @click="confirmChange('category');categoryPicker=false">确定</div>
            </div>
          </mt-picker>
        </mt-popup>
        <mt-popup v-model="degreePicker" position="bottom" class="mint-popup">
          <mt-picker :show-toolbar="true" :slots="[Object.create({values:degreeList,className: 'slot1'})]" value-key="label" @change="onDegreeDateChange">
            <div class="toolbar-button">
              <div @click="degreePicker=false">取消</div>
              <div @click="confirmChange('degree');degreePicker=false">确定</div>
            </div>
          </mt-picker>
        </mt-popup>
        <mt-popup v-model="conditionPicker" position="bottom" class="mint-popup">
          <mt-picker :show-toolbar="true" :slots="[Object.create({values:conditionList,className: 'slot1'})]" value-key="label" @change="onConditionDateChange">
            <div class="toolbar-button">
              <div @click="conditionPicker=false">取消</div>
              <div @click="confirmChange('condition');conditionPicker=false">确定</div>
            </div>
          </mt-picker>
        </mt-popup>
      </div>
    </div>
  </div>
</template>

<script>
import myAvatarImg from '@/assets/images/personal/个人中心_完善资料_头像.png'
import myAddPicImg from '@/assets/images/personal/完善资料_添加图片.png'
import {
  MessageBox,
  Toast
} from 'mint-ui'
import {
  Const
} from '@/consts'
import utils from '@/utils'
import fileApi from '@/api/file'
import userApi from '@/api/user'

import imagePicker from '@/components/imagePicker'

export default {
  data () {
    return {
      newValue: {},
      sexPicker: false,
      categoryPicker: false,
      degreePicker: false,
      conditionPicker: false,
      img: {
        myAvatar: myAvatarImg,
        myAddPic: myAddPicImg
      },
      // userInfo: {},
      info: {},
      editable: true,
      addrEditing: false,

      categoryList: [{
        value: 'POOR',
        label: '贫困家庭子女'
      }, {
        value: 'COLLEGE',
        label: '应届毕业大学生'
      }, {
        value: 'HIGHSCHOOL',
        label: '应届初高中毕业生'
      }, {
        value: 'COUNTRYSIDE',
        label: '农村转移就业劳动者'
      }, {
        value: 'UNEMPLOYMENT',
        label: '登记失业人员'
      }, {
        value: 'TREATMENTS',
        label: '强制隔离戒毒人员'
      }, {
        value: 'RELEASED',
        label: '刑满释放人员'
      }, {
        value: 'ONTHEJOB',
        label: '企业在职人员'
      }, {
        value: 'OTHER',
        label: '其他'
      }],

      degreeList: [{
        value: 'DOCTOR',
        label: '博士'
      }, {
        value: 'MASTER',
        label: '硕士'
      }, {
        value: 'UNDERGRADUATE',
        label: '本科'
      }, {
        value: 'JUNIOR',
        label: '大专'
      }, {
        value: 'SPECIALIZED',
        label: '中专和中技'
      }, {
        value: 'TECHNICAL',
        label: '技工学校'
      }, {
        value: 'HIGHSCHOOL',
        label: '高中'
      }, {
        value: 'MIDDLESCHOOL',
        label: '初中'
      }, {
        value: 'PRIMARYSCHOOL',
        label: '小学'
      }, {
        value: 'ILLITERACY',
        label: '文盲与半文盲'
      }],

      conditionList: [{
        value: 'HEALTHY',
        label: '健康'
      }, {
        value: 'COMMONLY',
        label: '一般'
      }, {
        value: 'POORLY',
        label: '较差'
      }],

      // intentionList: [{
      //     value: 'FOUND',
      //     label: '创办企业'
      // }, {
      //     value: 'SELFEMPLOYED',
      //     label: '个体经营'
      // }, {
      //     value: 'EMPLOYMENT',
      //     label: '单位就业'
      // }, {
      //     value: 'FLEXIBLE',
      //     label: '灵活就业'
      // }]

      sexList: [{
        value: 'MALE',
        label: '男'
      }, {
        value: 'FEMALE',
        label: '女'
      }],

      courselevelList: [{
        value: 'LOW',
        label: '初级'
      }, {
        value: 'MIDDLE',
        label: '中级'
      }, {
        value: 'HIGH',
        label: '高级'
      }]
    }
  },

  computed: {
    showIdcardfront () {
      return true
    },

    showIdcardback () {
      return true
    },

    showEmployment () {
      // 就业创业证
      /**
       * 1、贫困家庭子女
       * 2、应届毕业大学生
       * 3、应届初高中毕业生
       * 4、农村转移就业劳动者
       * 5、登记失业人员
       */
      return /POOR|COLLEGE|HIGHSCHOOL|COUNTRYSIDE|UNEMPLOYMENT/.test(this.info.category)
    },

    showInsurance () {
      // 低保家庭证明
      /**
       * 1、贫困家庭子女
       */
      return /POOR/.test(this.info.category)
    },

    showIndex () {
      // 索引页
      /**
       * 1、贫困家庭子女
       * 4、农村转移就业劳动者
       */
      return /POOR|COUNTRYSIDE/.test(this.info.category)
    },

    showApplicant () {
      // 申请人页
      /**
       * 1、贫困家庭子女
       * 4、农村转移就业劳动者
       */
      return /POOR|COUNTRYSIDE/.test(this.info.category)
    },

    showDiploma () {
      // 毕业证
      /**
       * 2、应届毕业大学生
       * 3、应届初高中毕业生
       */
      return /COLLEGE|HIGHSCHOOL/.test(this.info.category)
    },

    showStudent () {
      // 学生证
      /**
       * 2、应届毕业大学生
       */
      return /COLLEGE/.test(this.info.category)
    },

    showRelease () {
      // 监狱证明
      /**
       * 6、即将刑满释放人员
       */
      return /RELEASED/.test(this.info.category)
    },

    showAbandon () {
      // 戒毒所证明
      /**
       * 7、强制隔离戒毒人员
       */
      return /TREATMENTS/.test(this.info.category)
    },

    showContract () {
      // 劳动合同
      /**
       * 8、符合条件的企业在职人员
       */
      return /ONTHEJOB/.test(this.info.category)
    }

  },

  components: {
    imagePicker
  },

  created () {
    // this.userInfo = utils.get('USER_INFO') || {};
    utils.save('DIC_INFO', {
      categoryList: this.categoryList,
      degreeList: this.degreeList,
      conditionList: this.conditionList,
      sexList: this.sexList,
      courselevelList: this.courselevelList
    })

    let isFromSelection = !!(this.$route.query || {}).selection

    let infoDetail = utils.get('USER_DETAIL_INFO');

    if (isFromSelection) {
      this.editable = true
    }

    if (isFromSelection && infoDetail && Object.keys(infoDetail).length > 0) {
      this.info = infoDetail
    } else {
      utils.save('USER_DETAIL_INFO', null)
      this.getMyData()
    }
  },

  filters: {
    dicName (value, dic) {

      if (dic && value) {
        return (dic.filter(t => t.value == value)[0] || {}).label
      }

      return ''
    },

    max (value, length) {
      if (!value || !length) {
        return value
      }

      if ((value + '').length > length) {
        return (value + '').substring(0, length) + '...'
      }

      return value
    }
  },

  methods: {
    onSexDateChange (picker, values) {
      this.newValue.sex = values[0].value
    },
    onCategoryDateChange (picker, values) {
      this.newValue.category = values[0].value
    },
    onDegreeDateChange (picker, values) {
      this.newValue.degree = values[0].value
    },
    onConditionDateChange (picker, values) {
      this.newValue.condition = values[0].value
    },
    confirmChange (type) {
      this.info[type] = this.newValue[type]
    },
    goBack () {
      // if (this.editable) {
      //     this.editable = false
      //     return
      // }

      let from = this.$route.query.from || ''

      if (from) {
        this.$router.replace('/' + from.replace(/-/g, '/'))
      } else {
        this.$router.replace('/personal/setting/account')
      }

      utils.save('USER_DETAIL_INFO', null)
      utils.save('DIC_INFO', null)
    },

    selectPage (type) {
      if (this.editable) {

        utils.save('USER_DETAIL_INFO', this.info)

        this.$router.push({
          path: '/personal/setting/complete/selection',
          query: {
            type: type
          }
        })
      }
    },

    complete () {
      if (!this.editable) {
        this.editable = true
      } else {
        this.saveMyData()
      }
    },

    getMyData () {
      userApi.getMyData().then((resp) => {
        const result = resp[Const.RESP_RESULT] || {}
        this.info = result;

        utils.save('USER_DETAIL_INFO', result)
      }).catch((resp) => {
        // Toast(resp[Const.RESP_MESSAGE]);
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '获取信息失败')
        }
      });
    },

    formValidate (field) {
      if ((!field || field.indexOf('phoneno') >= 0) && !this.info.phoneno) {
        Toast('请填写手机号')
        return false
      }

      if ((!field || field.indexOf('phoneno') >= 0) && !/[0-9]{11}/.test(this.info.phoneno)) {
        Toast('请填写正确手机号')
        return false
      }

      if ((!field || field.indexOf('idcardno') >= 0) && !this.info.idcardno) {
        Toast('请填写身份证号')
        return false
      }

      if ((!field || field.indexOf('idcardno') >= 0) && !/[0-9]{17}[0-9xX]|[0-9]{15}[0-9xX]/.test(this.info.idcardno)) {
        Toast('请填写正确身份证号')
        return false
      }

      return true
    },

    getParams () {
      let model = {}
      const exclude = ['realname', 'course', 'courselevel', 'phoneno', 'idcardno']

      // if (!this.formValidate()) {
      //     return false
      // }

      for (let k in this.info) {

        if (exclude.indexOf(k) != -1) {
          continue
        }

        if (k.endsWith('url') || k.endsWith('id') && this['show' + k[0].toUpperCase() + k.replace(/(id|url)$/, '').substring(1)] === false) {
          continue
        }

        model[k] = this.info[k]
      }

      return model
    },

    saveMyData () {
      if (!this.editable) {
        return
      }

      let params = this.getParams()

      if (!params) {
        return
      }

      this.editable = false
      userApi.completeData({
        params: params
      }).then((resp) => {
        Toast(resp[Const.RESP_MESSAGE])
        this.goBack()
      }).catch((resp) => {
        // Toast(resp[Const.RESP_MESSAGE]);
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '出错了...')
        }
        this.editable = true
      });
    },

    handleFileChange ($event) {
      let targetName = $event.targetName || ''
      let fileData = $event.fileData || {}
      fileApi.upload({
        params: {
          file: fileData
        }
      }).then(resp => {
        $event.ok()
        let result = resp[Const.RESP_RESULT] || ''
        let id = 'file_' + (result.id || result.objectid)
        let key = targetName.replace('file_', '')
        this.info[key] = result.url || result
        this.info[key.replace(/url$/, 'id')] = result.id || result.objectid || result.url || result
        Toast('上传成功')
      }).catch(resp => {
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '出错了 ...')
        }
      })
    },

    handleFileRemoved ($event) {
      let targetName = $event.targetName || ''
      let key = targetName.replace('file_', '') || ''
      this.info[key] = ''
      this.info[key.replace(/url$/, 'id')] = ''
    },

    showDialog (content, title, max) {
      if (!content || content.length <= max) {
        return
      } else {
        const msgText = '<div class="text-justify" style="line-height: 25px;">' + content + '<div>'

        MessageBox(msgText, title || '温馨提示', {
          closeOnClickModal: false,
          type: 'info'
        })
      }
    },

    toggleAddrEdit (focusRef) {
      this.addrEditing = !this.addrEditing
      if (this.addrEditing) {
        let inputEl = this.$refs[focusRef].$el.querySelector('input') || {}

        setTimeout(() => {
          inputEl.focus()
          // inputEl.click()
        }, 20)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$offset-x: 16px;
$scale: 1.2;
.info-container {
  margin-left: $offset-x;
  margin-right: $offset-x;
  margin-top: 55px; // border-top: 1px solid #dddddd;
  .info-avatar {
    margin: 24px 0 18px 0;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }
  .option-item {
    min-height: 48px;
    border-bottom: 1px solid #dddddd;
    font-size: 14px * $scale;
    text-align: left;
    &:last-child,
    &.no-border {
      border: none;
    }
    &.option-line-holder {
      display: flex;
      justify-content: center;
      align-items: center;
      .option-line {
        height: 1px;
        width: 100%;
        background-color: #dddddd;
      }
    }
    .spec {
      color: #333333;
      border-bottom: none;
    }
    .option-radio-row {
      padding: 10px 0;
      min-height: 43px;
    }
    .option-label {
      padding: 10px 0;
      min-height: 43px;
    }
    .option-img-row {
      height: 65px; // padding-top: 3px;
      // padding-bottom: 3px;
      .option-label {
        padding: 0;
        line-height: 65px;
      }
      .option-avatar {
        text-align: right;
        .option-avatar-holder {
          display: inline-block;
        }
      }
    }
    .option-img-holder {
      width: 100%;
      min-height: 144px;
      margin-top: 5px;
      margin-bottom: 15px;
      border: 1px solid #dddddd;
      text-align: center;
      .img {
        min-height: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
        }
        &.plain {
          img {
            width: 60px;
          }
        }
      }
    }
  }
  .info-button {
    margin: 56px 0;
  }
  .mint-popup {
    .slot1 {
      width: 100%;
    }
    width: 100%;
    .picker-item {
      backface-visibility: hidden;
      width: 100%;
    }
  }
  .toolbar-button {
    padding-right: 20px;
    padding-left: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dddddd;
  }
}
</style>
